/**
 *  src[string] video的url
 *  type[string] 类型,'video(默认)/audio'
 *  title[string] 标题
 *  show[bool] 打开video
 *  onCancel[fn] 关闭查看器的回调
 *  */

import React from 'react';
import { Modal } from 'antd';
import logoPic from 'images/student/logo.png';
import './index.less';
export default (props) => {
  const {
    src,
    type = 'video',
    title = '',
    show = true,
    onCancel = () => { }
  } = props;
  if (!src || !show) {
    return null;
  }
  let titleDom = <div>
    <img style={{ marginRight: '20px' }} src={logoPic} />
    <span>{title && title || '课程回放'}</span>
    {/* <div className="close-content" onClick={onCancel}></div> */}
  </div>;
  if (type === 'video') {
    return (
      <Modal
        style={{ top: 100 }}
        maskClosable={false}
        footer={false}
        title={titleDom}
        visible={show}
        width={"90vw"}
        onCancel={onCancel}
        // closable={false}
        wrapClassName="wrap-media-modal"
      >
        <div style={{ height: '75vh', width: '100%', backgroundColor: '#000', textAlign: 'center' }}>
          <video autoPlay src={src} controls="controls" controlsList="nodownload" onContextMenu={() => { return false}} height="100%" width="100%">
            您的浏览器不支持视频播放，请升级
          </video>
        </div>
      </Modal>
    )
  }
  if (type === 'audio') {
    return (
      <Modal
        maskClosable={false}
        footer={false}
        title={title && title || '课程回放'}
        // title={titleDom}
        visible={show}
        width={800}
        onCancel={onCancel}
      // closable={false}
      >
        <div style={{ height: 50, width: '100%', textAlign: 'center' }}>
          <video autoPlay src={src} controls="controls" controlsList="nodownload" onContextMenu={false} height="100%" width="100%">
            您的浏览器不支持播放，请升级
          </video>
        </div>
      </Modal>
    )
  }
  return null;
}
